<template>
  <div>
      <el-container>
          <!--头部-->
          <el-header>
              <head-1></head-1>
          </el-header>
          <el-main>
                <el-row>
                    <el-col :span=24>
                        <h1>干预方案</h1>
                    </el-col>
                </el-row>
                <div class="el-colDiv">
                <el-row>
                    <el-col :span=6>
                        <span>姓名：{{member.tMember.name}}</span>
                    </el-col>
                    <el-col :span=6>
                        <span v-show="member.tMember.sex==2">性别：女</span>
                        <span v-show="member.tMember.sex==1">性别：男</span>
                    </el-col>
                    <el-col :span=6>
                        <span>年龄：{{member.tMember.age}}</span>
                    </el-col>
                </el-row><br>
                <el-row>
                    <el-col :span=6>
                        <span>健康师：{{member.tHealthmgr.healthMgrName}}</span>
                    </el-col>
                    <el-col :span=6>
                        <span v-show="member.status==2 || member.status==1">分类时间：{{member.tHealthmgr.createtime | dateFormat}}</span>
                    </el-col>
                    <el-col :span=8>
                        <span  v-show="member.status==2 || member.status==1">人群分类：{{member.peopleClassify}}</span>
                        <span  v-show="member.status==0">人群分类：暂无数据</span>
                    </el-col>
                </el-row><br>
                <el-row>
                    <el-col :span=6>
                        <span v-show="member.status==2">方案标题：{{interposeScheme.schemeTittle}}</span>

                    </el-col>
                    <el-col :span=6>
                        <span v-show="member.status==2">开始时间:{{interposeScheme.startTime | dateFormat}}</span>
                    </el-col>
                    <el-col :span=8>
                        <span v-show="member.status==2">结束时间:{{interposeScheme.endTime | dateFormat}}</span>
                    </el-col>
                </el-row><br>
                <el-row>
                    <el-col :span=6>
                        <span v-show="member.status==2">方案目标：{{interposeScheme.schemeTarget}}</span>
                    </el-col>
                </el-row><br>
                </div>
                <!--表格-->
                <div  v-show="member.status==2">
                        <div class="el-tableDiv" >
                        <el-table stripe :data="sportList" >
                            <el-table-column prop='' width="auto" label="干预类型">
                                <template>运动干预</template>
                            </el-table-column>
                            <el-table-column prop='sportName' width="auto" label="运动项目"></el-table-column>
                            <el-table-column prop='' width="auto" label="运动时长">
                                <template slot-scope="scope">
                                    <label>{{scope.row.sportTime}}分钟</label>
                                </template>
                            </el-table-column>
                            <el-table-column prop='sportCycle' width="auto" label="运动周期"></el-table-column>
                        </el-table>
                    </div><br>
                    <div class="el-tableDiv">
                        
                            <el-table  :data="foodList" stripe >
                                <el-table-column prop='' width="auto" label="干预类型">
                                    <template>食物干预</template>
                                </el-table-column>
                                <el-table-column prop='recommendFood' width="auto" label="推荐食物"></el-table-column>
                                <el-table-column prop='eatTimes' width="auto" label="餐次"></el-table-column>
                                <el-table-column prop='foodQuantity' width="auto" label="分量"></el-table-column>
                            </el-table>
                    </div>
                </div>
                <div v-show="member.status==1 || member.status==0 ">
                    <h3>暂无数据，请耐心等待</h3>
                </div>
                
                   <!-- <div class="el-tableDiv">
                    
                        <el-table :data="reportList" stripe style="100%">
                            <el-table-column prop='' width="auto" label="干预类型">
                                <template>食物干预</template>
                            </el-table-column>
                            <el-table-column prop='sportName' width="auto" label="推荐食物"></el-table-column>
                            <el-table-column prop='sportName' width="auto" label="餐次"></el-table-column>
                            <el-table-column prop='sportName' width="auto" label="分量"></el-table-column>
                            <el-table-column prop='name' width="auto" label="">
                                <template slot-scope="scope">
                                    <label>{{scope.row.minck}}分钟</label>
                                </template>
                            </el-table-column>
                        </el-table>
                </div>-->
                
        </el-main>
      </el-container>
  </div>
</template>

<script>
import Head1 from '../../components/home/Head1.vue'
import axios from 'axios'
export default {
    data() {
        return {
            member:{
               
            },
            sportList:[],
            foodList:[],
            interposeScheme:{}
        }
    },
    methods:{
        initMember(){
            axios.get("tInterposeClassify/queryById").then((response)=>{
                // alert(response.data);
                if(response.data[0]=='undefined' ||response.data[0]==undefined){
                    this.$router.push("/ko")
                }
                this.member=response.data[0];
            })
            axios.get("tInterposeClassify/querySchemeById").then((response)=>{
                this.interposeScheme=response.data[0];
            });
        }
        ,
        initScheme(){
            axios.get("tInterposeClassify/querySprotById").then((response)=>{
                this.sportList=response.data;
            });
            axios.get("tInterposeClassify/queryFoodById").then((response)=>{
                this.foodList=response.data;
            });
        }

    },
    created(){
        this.initMember();
        this.initScheme();
    },
    components: { Head1 },
     filters:{
        dateFormat:function(date){
            var dt = new Date(date);
            var year = dt.getFullYear();
            var month = (dt.getMonth()+1).toString().padStart(2,'0')//补零操作
            var dat = (dt.getDate()).toString().padStart(2,'0')
            var hours = dt.getHours().toString().padStart(2,'0')
            var minutes = dt.getMinutes().toString().padStart(2,'0')
            var seconds = dt.getSeconds().toString().padStart(2,'0')
            return year+"-"+month+"-"+dat+" "+hours+":"+minutes+":"+seconds
        }
    },

}
</script>

<style>
     .el-colDiv{
        /*height: 100px;*/
        border: 1px solid gray;
        padding-top: 20px;
        padding-left: 100px;
        text-align: left;
        width: 73%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .el-tableDiv{
        border: 1px solid gray;
        width: 80%;
        margin: 0 auto;
    }
</style>